<template>
	<view class="wrap">
		<view class="item__header">
		
		   <image :src="msgList.msg_image" ></image>
		  
		   <view class="item__main" >
		   
		   	<view  style="text-align: center;margin: 0 auto;">{{$t('locale.kf3')}}
		   	 
		   			<span > {{$t('locale.kf2')}}</span>
		   			<br/>
		   	  <span @click="jump()" style="font-size: 42rpx;color: #4278C8;font-weight: 700;">{{$t('locale.kf')}}</span>
		   	 
		   	 
		   	
		   	</view>
		   </view> 
		   
		 </view>
		 
		 
		
	</view>
</template>

<script>
	import {formatDate} from '../../common/js/utils.js'
	export default{
		data(){
			return {
				msgList:[], 
				image:'', 
			}
		},
		methods:{
			
			itemClick(){
				uni.navigateTo({
					url:"/pages/find/msgDetails"
				})
			}
		},
		filters:{
			formatTime(timer){
				return  formatDate(timer * 1000)
			}
		},
		onLoad() {
			this.getConfig()
		},
		methods:{
			jump(){
				window.location.href = this.msgList.msg_text
			},
			// 获取消息列表
			async getConfig(){
				let res = await this.$api.getConfig()
				if(res.code === 1 && res.data){
					this.msgList = res.data
				
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		.item__header {
		  position: relative; /* 使得图片的定位相对于这个容器 */
		  // height: 100vh;
		}
		
		.item__header  {
		  position: absolute;
		  top: 30%; /* 将图片的顶部与容器的中心对齐 */
		  left: 50%; /* 将图片的左边与容器的中心对齐 */
		  transform: translate(-50%, -50%); /* 通过平移来实现居中 */
		  max-width: 100%; /* 确保图片不超出容器 */
		  max-height: 100%; /* 确保图片不超出容器 */
		}
		
		image{
			height: 400rpx;
			width: 400rpx;
		}
		
		.header__title{
			margin-top: 20rpx;
			text-align: center;
			display: flex;
			justify-content: center;
		}
		
	}
</style>